<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆角边框常用写法</title>
  <style>
    div {
      background-color: pink;
    }

    .yuanxing {
      width: 400px;
      height: 400px;
      background: pink url(images/绘制圆形.png) no-repeat center;
      background-size: 90%;
      /* 将值设置为正方形盒子 高度或宽度 的一半 */
      /* border-radius: 200px; */
      /* 如果计算麻烦可以设置50%，这样会自动获取 高度或宽度的一半 */
      border-radius: 50%;
    }

    .juxing {
      width: 300px;
      height: 100px;
      /* 技巧为 将值设置为高度的 一半 */
      border-radius: 50px;
    }

    .radius {
      width: 400px;
      height: 400px;
      background: pink url(images/圆角矩形数值的顺序.png) no-repeat center;
      background-size: 95%;
      /* 取值顺序：
      border-radius： 左上角 右上角 右下角 左下角；
      对角线对应，其他值省略时的写法和border设置的方式一样
      */
      border-radius: 10px 20px 30px 40px;
      border-radius: 10px 20px 40px;
      border-radius: 10px 40px;
      border-radius: 10px;
      border-top-left-radius: 50px;
      /* top-left值不能颠倒，不能写为left-top */
      border-left-top-radius: 50px;
    }

    /* 注意：
    border-radius 可以分开写，用的较少，了解即可
    border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
    */
  </style>
</head>
<body>
  <p>1. 圆形的方法：</p>
  <div class="yuanxing"></div>
  <p>2. 圆角矩形的方法：</p>
  <div class="juxing"></div>
  <p>3. 可以设置不同的圆角：</p>
  <div class="radius"></div>
</body>
</html>